<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>我(他)的粉丝</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
.blank{
	height: 0.5rem;
	background: #F5F7F8;
}
.infoBox{
	padding: 0 0.6rem;
}
.icon{
	/*width: 2rem;*/
	height: 2rem;
	border-radius: 50%;
	margin-right: 0.35rem;
}
.info{
	/*height: 3.3rem;*/
	padding: 0.7rem 0;
}
.color-36{
	color: #363335;
}
.follow{
	width: 2.4rem;
	height: 1.1rem;
	line-height: 1rem;
	text-align: center;
	font-size: 0.6rem;
	border: 1px solid #E73250;
	color: #E73250;
	border-radius: 5rem;
}
.dis{
	opacity: 0.6;
border: 1px solid #ADADAD;
color: #adadad;
}
</style>
</head>
<body>
<div class="blank"></div>
<div class="bg-white infoBox">
	<div data-id="1" class="info aui-flex-col aui-flex-between aui-flex-middle aui-border-b">
		<div><img class="icon" src="../../image/common/avatar.png" alt=""></div>
		<div class="flex-auto">
			<div class="aui-font-size-14 color-36">Fireart</div>
			<div class="aui-font-size-12 color-ad">设计师</div>
		</div>
		<div class="follow" tapmode onclick="onFollow(this)">关注</div>
	</div>
	<div data-id="2" class="info aui-flex-col aui-flex-between aui-flex-middle aui-border-b">
		<div><img class="icon" src="../../image/common/avatar.png" alt=""></div>
		<div class="flex-auto">
			<div class="aui-font-size-14 color-36">Fireart</div>
			<div class="aui-font-size-12 color-ad">设计师</div>
		</div>
		<div class="follow dis" tapmode onclick="onFollow(this)">已关注</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function(){
	api.parseTapmode();
};
function onFollow(el){
	var _this = $$(el);
	var item = _this.parents('.info');
	var itemId = item.data('id');
	if( !_this.hasClass('dis') ){
		_this.addClass('dis');
		_this.text('已关注');
	}else{
		var confirmMaskTxt = ['是否取消关注？','取消','确认'];
		openConfirmMask(confirmMaskTxt,'queren('+itemId+')');
	}
}
function queren(id){
	var item = $$('.infoBox .info[data-id="'+ id +'"]');
	var flowBtn = item.find('.follow');
	if( flowBtn.hasClass('dis') ){
		flowBtn.removeClass('dis');
		flowBtn.text('关注');
	}
}
</script>
</html>
